<template>
  <view class="mobile-page" :style="my_style">
    <!-- 表单 -->
    <view class="form font-32 bg-white">
      <view class="cell">
        <text class="label">手机号</text>
        <input
          type="number"
          :disabled="scene !== 'change_bind'"
          maxlength="11"
          v-model="mobile"
          placeholder="请输入手机号"
        />
      </view>
      <view class="cell flex-between">
        <view class="flex-row">
          <text class="label">图片验证</text>
          <input
            class="u-flex-1"
            maxlength="4"
            type="text"
            v-model="imgcode"
            placeholder="输入图片验证码"
          />
        </view>
        <image @click="imgCode" class="img-code" :src="img_url" mode=""></image>
      </view>
      <view class="cell flex-between u-m-b-26">
        <view class="flex-row">
          <text class="label">验证码</text>
          <input type="number" maxlength="6" v-model="verify_code" placeholder="请输入短信验证码" />
        </view>
        <text class="main-color" @click="sendCaptcha(mobile, scene, imgcode)">{{
          btnCodeText
        }}</text>
      </view>
    </view>
    <view class="u-p-24">
      <view
        class="primary-btn flex-center u-m-b-12"
        @click="scene === 'change_bind' ? changeMobile() : verifyMobile()"
        >{{ btn_text }}</view
      >
    </view>
    <!-- 注销弹窗 -->
    <u-popup
      v-model="show_destory"
      :closeable="true"
      mode="center"
      border-radius="16"
      width="560"
      height="590"
    >
      <view class="destory-pop flex-between fdc">
        <view class="font-32 font-weight-500 lh-44">重要提醒</view>
        <view class="u-p-40 u-text-center light-color"
          >注销账号会清空所有信息和数据，你真的要注销吗？确认注销请输入您的名称</view
        >
        <input type="text" v-model="nickname" maxlength="20" placeholder="输入您的名称" />
        <view class="footer-primary-btn flex-center" @click="userDestroy">确认注销</view>
      </view>
    </u-popup>
  </view>
</template>
<script>
  let BASE_CODE = `${process.env.VUE_APP_URL}/imgcode`
  import mixin from '@/mixin/captcha'
  export default {
    mixins: [mixin],
    data() {
      return {
        active: 'login',
        is_agree: false,
        verify_code: '', // 验证码
        imgcode: '', // 图形验证码
        confirm_password: '', // 确认密码
        mobile: '', // 用户手机号
        password: '', // 密码
        type: '', // verify_mobile 验证 change_bind 换绑
        img_url: '',
        scene: 'verify_mobile',
        nickname: '',
        key: '',
        show_destory: false, // 注销弹窗
        user_info: {},
      }
    },
    computed: {
      btn_text() {
        return this.scene === 'change_bind' ? '确认新绑定' : '下一步'
      },
    },
    onLoad(options) {
      this.type = options.type
      this.user_info = uni.getStorageSync('user_info') || {}
      this.key = options.key || ''
      this.scene = options.scene || options.type || ''
      uni.setNavigationBarTitle({
        title: this.scene === 'change_bind' ? '换绑手机号' : '验证手机号',
      })
      this.imgCode()
      this.getMobile()
    },
    methods: {
      getMobile() {
        if (this.scene === 'verify_mobile' || this.scene === 'destory_account') {
          this.mobile = this.user_info.mobile
        }
      },
      async imgCode() {
        this.img_url = `${BASE_CODE}?t=${this.randomStr(10)}`
      },
      // 生成随机验证码
      getRandomImgCode() {
        this.img_url = `${BASE_CODE}?t=${this.randomStr(10)}`
      },
      // 用户-验证手机号
      async verifyMobile() {
        let params = {
          verify_code: this.verify_code,
        }
        if (!this.verify_code) {
          this.$u.toast('请输入短信验证码')
          return
        }
        if (this.type === 'destory_account') {
          this.show_destory = true
          return
        }
        const res = await this.$api.common.user('verifyMobile', params)
        if (res.code === 200) {
          const { key } = res.data
          console.log(this.type)
          if (this.type === 'reset_pwd') {
            this.replaceJump(`/views/user/setting/pay_password?key=${key}`)
          } else {
            this.replaceJump(
              `/views/user/setting/mobile?type=change_bind&scene=change_bind&key=${key}`
            )
          }
        }
      },
      // 用户-换绑手机号
      async changeMobile() {
        const { mobile, verify_code, key } = this
        let params = {
          mobile,
          verify_code,
          key,
        }
        const res = await this.$api.common.user('changeMobile', params)
        if (res.code === 200) {
          let info = {
            title: '换绑手机号',
            tip: '换绑手机号成功',
            btn: '返回设置',
            link: '/views/user/setting/index',
          }
          this.successGo(`?info=${encodeURIComponent(JSON.stringify(info))}`)
        }
      },
      // 用户注销
      async userDestroy() {
        const { verify_code, nickname } = this
        let params = {
          verify_code,
          nickname,
        }
        const res = await this.$api.common.user('userDestroy', params)
        if (res.code === 200) {
          uni.removeStorageSync('access_token')
          uni.removeStorageSync('member_id')
          this.successBack('注销成功', 2)
        }
      },
    },
  }
</script>
<style lang="scss" scoped>
  .mobile-page {
    min-height: 100vh;

    .bg-box {
      width: 100%;
      background-size: 100% 100%;
    }

    .tab-item {
      width: 50%;
      height: 100rpx;
      line-height: 100rpx;
      color: #666;
    }

    .form {
      padding: 28rpx 24rpx 0;

      input {
        height: 100rpx;
        border-bottom: 1px solid #ececec;
      }

      .cell {
        display: flex;
        height: 100rpx;
        padding: 28rpx 0;
        background-color: #fff;
        border-bottom: 1px solid #ececec;
        flex-direction: row;
        align-items: center;

        input {
          border-bottom: none;
        }

        .label {
          width: 150rpx;
        }

        .img-code {
          width: 170rpx;
          height: 75rpx;
        }
      }
    }

    .primary-btn {
      width: 100%;
      height: 88rpx;
      font-size: 34rpx;
      color: #fff;
      background: var(--color);
      border-radius: 100rpx;
    }

    // 注销弹窗
    .destory-pop {
      height: 100%;
      padding: 50rpx 30rpx;

      input {
        width: 100%;
        height: 88rpx;
        padding: 0 24rpx;
        background: #fff;
        border: 2rpx solid #999;
        border-radius: 8rpx;
      }
    }
  }
</style>
